<template>
  <div class="footerNav">
    <el-row :span="24" class="navRow">
      <el-menu default-active="activeIndex" @select="handleSelect" mode="horizontal" class="navMenu">
        <el-menu-item index="home">
          <i class="iconfont1"></i>
          <span>首 页</span>
        </el-menu-item>
        <el-menu-item index="shopping">
          <i class="iconfont2"></i>
          <span>订 购</span>
        </el-menu-item>
        <el-menu-item index="user">
          <i class="iconfont3"></i>
          <span>个人中心</span>
        </el-menu-item>
        <!-- <el-menu-item index="order">
          <i class="iconfont"></i>
          我的订单
        </el-menu-item> -->
      </el-menu>
    </el-row>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {}
  },
  methods: {
    handleSelect (key, keyPath) { // 底部栏切换
      this.$router.push('/' + key)
    }
  }
}
</script>

<style lang="scss" type="stylesheet/scss">
.footerNav {
  background-color: #666;
   .el-menu--horizontal .el-menu-item{
        height:50px;
      }
  .navRow {
    .el-menu-item, .el-submenu__title{
      line-height:10px;
    }
    .navMenu {
      width: 100%;
      display: flex;
      justify-content: space-around;
      background-color: #fff;
      border: 1px solid #eee;
      .is-active {
        font-weight: 600;
        color: green;
      }
      .el-menu-item {
        border-bottom: 0;
        // line-height: 78px;
        width:33.3%;
        span{
          display:block;
          line-height:10px;
        }
        i{
          display: inline-block;
          margin:2px auto 4px auto;
        }
        .iconfont1 {
          font-size: 16px;
          height: 30px;
          width: 30px;
          text-align: center;
          line-height: 30px;
          background: url('../../assets/imgs/icon01_select@3x.png') no-repeat;
          background-size:cover;
        }
        .iconfont2 {
          font-size: 16px;
          height: 30px;
          width: 30px;
          text-align: center;
          line-height: 30px;
          background: url('../../assets/imgs/icon02_select@3x.png') no-repeat;
          background-size:cover;
        }
        .iconfont3 {
          font-size: 16px;
          height: 30px;
          width: 30px;
          text-align: center;
          line-height: 30px;
          background: url('../../assets/imgs/icon03_select@3x.png') no-repeat;
          background-size:cover;
        }
      }
      .el-menu-item:hover {
        border-bottom: 0;
      }
     
    }
  }
}
</style>

